<template>
  <view>
    <!-- 筛选 -->
    <view class="filter">
      <text class="active">综合</text>
      <text>销量</text>
      <text>价格</text>
    </view>
    <!-- 商品列表scrolltolower -->
    <scroll-view @scrolltolower="getMore" class="goods" scroll-y>
      <view v-for="item in list" :key="item.goods_id" class="item" @click="goDetail(item.goods_id)">
        <!-- 商品图片 -->
        <image class="pic" :src="item.goods_small_logo" />
        <!-- 商品信息 -->
        <view class="meta">
          <view class="name">{{item.goods_name}}</view>
          <view class="price">
            <text>￥</text>{{item.goods_price}}
            <text>.00</text>
          </view>
        </view>
      </view>
     <view class="noMore" v-if="isLoaded">
       <text>没有更多了....</text>
     </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
    data(){
     return{
     list:[]
     }
    },
    // 获取查询参数？=》onLoad（qu）
    onLoad(query){
    // console.log(query);
    // 初始化分页数据=》存储实例上
    this.query = query 
    //  页码=>初次记载获取第一页数据
    this.query.pagenum = 1
    // 每页条数
    this.query.pagesize = 5
    this.gitPrdList(this.query )
    },
    computed:{
     //列表数据是否加载完毕
     isLoaded(){
       return this.list.length === this.total
     }
    },
      // 页面触底触发
    onReachBotton (){
     console.log("到底了···");
    }, 
  methods: {
    // 上拉加载更多
    getMore(){
    //  console.log("滚动到底部");
    // 如果数据加载完了=》阻止接口调用
    if(this.isLoaded) return;
    // 每次触底加载下一页数据
    this.query.pagenum++
    this.gitPrdList(this.query)
    },
  
    // 根据关键词查询商品列表
    async gitPrdList(query){
       const {msg,data} =await this.request({url:'/goods/search',data:query})
     console.log(msg , data);
     if(msg.status === 200){
      //  console.log(...data.goods);
       this.list.push(...data.goods)
      //  商品列表数据统计
      this.total = data.total
     }
   },
      // 跳转商品详情
    goDetail(id) {
      // uni.navigateTo
      uni.navigateTo({
        url: `/packone/goods/index?id=${id}`
      });
    }
  }
};
</script>

<style scoped lang="scss">
.noMore{
 margin: 30rpx;
 color : #cccc;
 font-size: 40rpx;
 text-align: center;
}
.filter {
  display: flex;
  height: 96rpx;
  line-height: 96rpx;
  border-bottom: 1rpx solid #ddd;

  /* #ifdef H5 */
  position: relative;
  z-index: 99;
  /* #endif */

  text {
    flex: 1;
    text-align: center;
    font-size: 30rpx;
    color: #333;

    &.active {
      color: #ea4451;
    }
  }
}

.goods {
  position: absolute;
  width: 100%;
  top: 97rpx;
  bottom: 0;
}

.item {
  display: flex;
  padding: 30rpx 20rpx 30rpx 0;
  margin-left: 20rpx;
  border-bottom: 1rpx solid #eee;

  &:last-child {
    border-bottom: none;
  }

  .pic {
    width: 200rpx;
    height: 200rpx;
    margin-right: 30rpx;
  }

  .meta {
    flex: 1;
    font-size: 27rpx;
    color: #333;
    position: relative;
  }

  .name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .price {
    position: absolute;
    bottom: 0;

    color: #ea4451;
    font-size: 33rpx;

    text {
      font-size: 22rpx;
    }
  }
}
</style>
